<template>
  <div class="container ArticleIndex">
    <div class="auto">
      <div class="rule_wrap">
        <a-row >
          <a-col span="5" style="margin-right: 30px;">
            <a-card title="栏目列表" hoverable :bodyStyle="bodyStyle" :loading="confirmLoading">
              <a-tree
                v-if="isRender"
                defaultExpandAll
                showLine
                :defaultSelectedKeys="defaultSelectedKeys"
                @select="onSelect"
                :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
                :treeData="departTree"
                :replaceFields="replaceFields"
                :autoExpandParent="autoExpandParent"
              />
            </a-card>
          </a-col>
          <a-col span="18">
            <a-row style="margin-bottom: 10px;">
              <a-card title="搜索栏">
                <a-form layout="inline" @keyup.enter.native="searchQuery">
                  <a-row>

                    <a-col span="8">
                      <a-form-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <a-input placeholder="请输入标题" v-model="queryParam.title" style="width: 100%"></a-input>
                      </a-form-item>
                    </a-col>

                    <a-col span="9">
                      <a-form-item label="发布时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                        <a-date-picker placeholder="请选择发布时间" v-model="queryParam.time" style="width: 100%"/>
                      </a-form-item>
                    </a-col>

                    <a-col span="6" ofset="1">
                    <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                      <a-button type="primary" @click="searchQuery1" icon="search">查询</a-button>
                      <a-button type="primary" @click="searchReset1" icon="reload"
                                style="margin-left: 8px">重置</a-button>
                    </span>
                    </a-col>

                  </a-row>
                </a-form>
              </a-card>
            </a-row>
            <a-row>
              <a-card title="文章列表（普通栏目类型）" hoverable>
                <!-- 操作按钮区域 -->
                <div class="table-operator" style="margin-bottom: 10px;">
                  <a-button @click="handleAddArticle" type="primary" icon="plus" v-if="selectedKeys">新增</a-button>
                  <a-button style="margin-left: 10px;" type="primary" icon="download" @click="exportDown"
                            v-show="selectedRowKeys.length > 0">导出
                  </a-button>
                  <a-button
                    @click="batchDel"
                    style="margin-left:8px"
                    v-show="selectedRowKeys.length > 0"
                    ghost
                    type="primary"
                    icon="delete">批量删除
                  </a-button>
                </div>

                <!-- table区域-begin -->
                <div>
                  <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
                    <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
                    <a style="margin-left: 24px" @click="onClearSelected">清空</a>
                  </div> -->

                  <a-table
                    ref="table"
                    size="middle"
                    bordered
                    rowKey="id"
                    :loading="loading"
                    :columns="columns"
                    :dataSource="dataSource"
                    :pagination="ipagination"
                    :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                    @change="handleTableChange">

                  <span slot="action" slot-scope="text, record">
                    <a style="color: #1890ff" href="javascript:void(0);" @click="toShow(record)">
                      查看
                      <!-- <router-link target="_blank" :to="{path: '/dailyActivities/dailyActivitiesDetail', query: {articleId: record.id}}" style="color: #1890ff">查看</router-link> -->
                    </a>
                    <a-divider type="vertical"/>
                    <a>
                      <router-link
                        :to="{path: '/articleManage/editArticle', query: {articleId: record.id, columnId: selectedKeys}}"
                        style="color: #1890ff">编辑</router-link>
                    </a>
                    <a-divider type="vertical"/>
                    <a-popconfirm v-if="record.type == 1" title="确定发布吗?" @confirm="() => handleChangeType(record.id)">
                      <a style="color: #1890ff">发布</a>
                    </a-popconfirm>
                    <a-popconfirm v-else title="确定撤销吗?" @confirm="() => handleChangeType(record.id)">
                      <a style="color: #1890ff">撤销</a>
                    </a-popconfirm>
                    <a-divider type="vertical"/>
                    <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                      <a style="color: #1890ff">删除</a>
                    </a-popconfirm>
                  </span>
                  </a-table>
                </div>
              </a-card>
            </a-row>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { USER_INFO } from  "@/store/mutation-types"
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import '../../../public/css/style.css';
import { getAction, postAction  } from '@/api/manage'
import BASE_URL from './../../../config'
export default {
  name: 'ArticleManage',
  mixins: [JeecgListMixin],
    beforeRouteEnter (to, from, next) {
    window.scrollTo(0, 0);
    if(Vue.ls.get(USER_INFO) && Vue.ls.get(USER_INFO).username && Vue.ls.get(USER_INFO).role == '1') {
      next()
    } else {
      next({
        path: '/home'
      })
    }
  },
  data () {
    return {
      confirmLoading: false,
      bodyStyle: {
        height: '600px',
        overflow: 'auto'
      },
      isRender: false,
      defaultSelectedKeys: [],
      disableMixinCreated: true,
      labelCol: {
          xs: { span: 24 },
          sm: { span: 7 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 17 },
        },
      queryParam: {},
      url: {
        list: '/article/listall',
        delete: '/article/delete',
        deleteBatch: '/article/delete'
      },
      replaceFields: {
        title: 'name',
        key: 'id',
        children: 'children'
      },
      autoExpandParent: true,
      departTree: [],
      selectedKeys: '',
      columns: [
        {
          title: '发布时间',
          align: "center",
          dataIndex: 'createDate'
        },
        {
          title: '标题',
          align: "center",
          dataIndex: 'title'
        },
        // {
        //   title: '栏目名称',
        //   align: "center",
        //   dataIndex: 'updateTime'
        // },
        {
          title: '发布状态',
          align: "center",
          dataIndex: 'type',
          customRender: (text) => {
            switch (text) {
              case 1:
                return (
                  <div>
                  <span class="market" style="background: #999999;"></span>
                  <span>草稿</span>
                </div>
                )
                break;
              case 2:
                return (
                  <div>
                  <span class="market" style="background: #54FF9F;"></span>
                  <span>发布</span>
                </div>
                )
                break;
            }
          }
        },
        {
          title: '排序',
          align: "center",
          dataIndex: 'seq'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          width: 190,
          scopedSlots: {customRender: 'action'},
        }
      ],
    };
  },
  created() {
    this.getArticleList()
  },
  watch: {
    selectedKeys: {
      immediate: true,
      handler(val) {
        if(val) {
          this.queryParam.columnId = val
          this.searchQuery()
        } else {
          this.fdataSource = []
        }
      }
    }
  },
  methods: {
    toShow(record) {
      if(record.rootColumnId == 1) {
        this.$router.push({path: '/dailyActivities/dailyActivitiesDetail', query: {articleId: record.id}})
      } else if(record.rootColumnId == 2) {
        this.$router.push({path: '/rulesAndRegulations/RulesAndRegulationsDetail', query: {rulesId: record.id}})
      } else if(record.rootColumnId == 3) {
        this.$router.push({path: '/noticeNotice/noticeNoticeDetail', query: {noticeId: record.id}})
      }
    },
    exportDown() {
      console.log(this.selectedRowKeys)
      let ids = this.selectedRowKeys.join(',')
      let url = BASE_URL + '/article/zipDownload?ids=' + ids
      window.open(url)
    },
    searchReset1() {
      this.queryParam = {
        columnId: this.selectedKeys
      }
      this.searchQuery1()
    },
    searchQuery1() {
      if(this.queryParam.columnId) {
        this.searchQuery()
      } else {
        this.$message.error("请选择栏目!")
      }
    },
    handleAddArticle() {
      this.$router.push({path: '/articleManage/editArticle', query: {columnId: this.selectedKeys}})
    },
    handleDelete: function (id) {
      if(!this.url.delete){
        this.$message.error("请设置url.delete属性!")
        return
      }
      var that = this;
      postAction(that.url.delete, {ids: id}).then((res) => {
        if (res.code == 0) {
          that.$message.success(res.msg);
          that.searchQuery();
        } else {
          that.$message.warning(res.msg);
        }
      });
    },
    handleChangeType(id) {
      let self = this
      let url = '/article/setType/' + id
      getAction(url, {}).then(res => {
        if(res.code == 0) {
          self.$message.success(res.msg)
          self.searchQuery1()
        } else {
          self.$message.error(res.msg)
        }
      })
    },
    onSelect(selectedKeys, e) {
      let record = e.node.dataRef
      this.selectedKeys = record.id
    },
    getArticleList() {
      let self = this
      this.confirmLoading = true
      getAction('/column/listall', {parentId: 0}).then(res => {
        if(res.code == 0) {
          self.departTree = [...res.result]
          if(self.$route.query.columnId) {
            self.defaultSelectedKeys = [parseInt(self.$route.query.columnId)]
            self.selectedKeys = self.$route.query.columnId
          } else if(self.departTree.length) {
            self.defaultSelectedKeys = [parseInt(self.departTree[0].id)]
            self.selectedKeys = self.departTree[0].id
          }
          self.isRender = true
        } else {
          self.$message.error(res.msg)
        }
      }).finally(() => {
        self.confirmLoading = false
      })
    }
  }
};
</script>

<style lang="less">
.ArticleIndex {
  .no-data {
      color: rgba(0, 0, 0, .25);
      text-align: center;
      line-height: 64px;
      font-size: 16px;

      i {
        font-size: 24px;
        margin-right: 16px;
        position: relative;
        top: 3px;
      }
    }

  .ant-card-body::-webkit-scrollbar {/*滚动条整体样式*/
    width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
    }

  .ant-card-body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: #535353;
  }

  .ant-card-body::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #EDEDED;
  }
  .market {
		content: '';
		margin: 3px;
		display: inline-block;
		width: 6px;
		height: 6px;
		border-radius: 50%;
	}
}
</style>
